<template>
  <div class="login-container">
    <div class="login-form">
      <h2>登录用户</h2>
      <el-form
        :model="formData"
        :rules="formRules"
        ref="loginForm"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(loginForm)">登录</el-button>
          <el-button type="primary" @click="resetForm(loginForm)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="register-link">
        还没有账号？<router-link to="/register">去注册</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import storage from '@/utils/storage' // 导入存储库
import { useRouter } from 'vue-router' // 导入路由器
import { usePageTitle } from '@/hooks/usePageTitle' // 导入页面标题钩子
import { userNavtoHome } from '@/hooks/userNavTopHome'
import { reactive, ref } from 'vue' // 导入 Vue 的响应式和引用模块
import { loginUser } from '@/api/user' // 导入登录 API
import type { FormInstance, FormRules } from 'element-plus' // 导入 Element Plus 的表单类型
import { ElMessage } from 'element-plus' // 导入 Element Plus 的消息框

interface RuleForm {
  username: string
  password: string
}

usePageTitle('登录') // 设置页面标题为“登录”
// 监听userInfo中的username 如果有值说明已经登录，跳转到home页面
userNavtoHome()

// 获取路由器
const router = useRouter()

// 定义一个响应式对象 formData，用于存储表单数据
const formData = reactive<RuleForm>({
  // 初始化用户名为“admin”
  username: 'admin',
  // 初始化密码为“123456”
  password: '123456'
})

// 定义一个引用 loginForm，用于存储表单实例
const loginForm = ref<FormInstance>()
// 定义一个响应式对象 formRules，用于存储表单验证规则
const formRules = reactive<FormRules<RuleForm>>({
  // 定义用户名验证规则
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }, // 必填，提示用户输入用户名
    {
      pattern: /^[a-zA-Z0-9_]+$/, // 匹配字母、数字和下划线
      message: '用户名只能包含字母、数字和下划线', // 提示用户名格式正确
      trigger: 'blur' // 触发 blur 事件
    }
  ],
  password: [
    // 定义密码验证规则
    { required: true, message: '请输入密码', trigger: 'blur' }, // 必填，提示用户输入密码
    { min: 5, max: 10, message: '密码长度在5-10个字符之间', trigger: 'blur' } // 长度在5-10个字符之间，提示密码长度正确
  ]
})

const login = (formEl: FormInstance | undefined) => {
  // 定义一个函数 login，用于处理登录操作
  formEl?.validate(async (valid) => {
    // 如果表单存在
    if (valid) {
      // 如果表单验证通过
      const res: any = await loginUser(formData) // 调用登录 API
      // 把 token 存入本地存储
      storage.setItem('token', res.token)
      // 提示登录成功
      ElMessage.success('登录成功')
      // 重置表单
      formEl.resetFields()
      // 跳转到主页
      router.push('/')
    } else {
      console.log('error submit!') // 提示表单提交失败
      return false // 返回 false
    }
  })
}

// 定义一个函数 resetForm，用于处理重置表单操作
const resetForm = (formEl: FormInstance | undefined) => {
  // 如果表单存在，重置表单
  formEl?.resetFields()
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.login-form {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.register-link {
  margin-top: 10px;
  text-align: center;
}

.register-link a {
  color: #409eff;
  cursor: pointer;
}
</style>
